<template>
  <!-- 头部导航 -->
   <div>
  <div class="el-header">

        <div class="head-left">
          <span>黑马欢迎您 !</span>

          <div v-if="username" style="display: flex;gap: 10px;">
            <span>欢迎您</span>
            <span style="color: red;">{{ username }}</span>
            <a href="/login" style="color: #f9f9f9;" @click="quitlogin">退出登录</a>
          </div>

          <div v-else style="display: flex;gap: 10px;">
            <a href="login" class="" style="color: #01aeec">请登录</a>
          <a  href="login" style="color: #01aeec">免费注册!</a>
          </div>

        </div>

        <div class="head-right" style="">
          <div v-for="(item, index) in navItems" :key=" index">
            <span
              class="nav-item"
              :class="{ active: activeIndex === index }"
              @click="activeIndex = index"
              >{{ item }}</span
            >
            <span style="padding-left: 5px;"
              v-if="index < navItems.length - 1"
              class="separator"
              :key="'separator-' + index"
              >|</span
            >
          </div>
        </div>

  </div>
   <router-view></router-view>
</div>
</template>

<script>
import {
  mapGetters, mapMutations
} from 'vuex'
export default {

  name: 'Navtive',

  data () {
    return {
      navItems: [
        '首页',
        '我的购物车',
        '我的黑马',
        '黑马会员',
        '企业采购',
        '关注黑马',
        '客户服务',
        '网站导航'
      ],
      activeIndex: 0 // 初始无选中项

    }
  },

  mounted () {
    // 获取username
    // this.username = this.$store.getters['m_user/username']
  },

  computed: {
    ...mapGetters('m_user', ['username'])
  },

  methods: {
    ...mapMutations('m_user', ['clearUserInfo']),

    quitlogin () {
      this.$router.replace('/login')
      this.clearUserInfo() // 清除用户名
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {

  line-height: 20px;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  width: 1450px;
  background-color: #bdbcbc;
}

.head-left {
  display: flex;
  align-items: center;
  gap: 10px;

}

.head-right {
  display: flex;
  align-items: center;
  gap: 10px;

}
.active {
  color: #01aeec;
  transition: color 0.3s; /* 添加过渡效果 */
}
</style>
